/**
 * Created by wuyunan on 2017/5/19.
 */
import React from "react";

import PropTypes from "prop-types";
import {
  StyleSheet, Text, TouchableOpacity, Image, View,
} from "react-native";
import { Color, FontSize, scale } from "../../common/index";
import { isEmpty } from "../../utils/utils";
import HolderImage from "./HolderImage";

const ImageButton = props => {
  const {
    onPress, disabled, style, text, textColor, fontSize, source, itMargin, imgHeight, imgWidth,
  } = props;

  return (
    <View style={[styles.container, style]}>
      <TouchableOpacity onPress={onPress} disabled={disabled} style={[styles.container, style]}>
        <Image
          source={source}
          style={[styles.image, { height: imgHeight, width: imgWidth }]}
          resizeMode="contain"
        />
        {!isEmpty(text) && (
          <Text
            style={[
              styles.text,
              {
                color: textColor,
                fontSize,
                marginTop: itMargin,
              },
            ]}
          >
            {text}
          </Text>
        )}
      </TouchableOpacity>
    </View>
  );
};
ImageButton.defaultProps = {
  textColor: Color.text_content,
  fontSize: FontSize.SIZE_12,
  disabled: false,
  itMargin: scale * 6,
  imgHeight: scale * 48,
  imgWidth: scale * 48,
};
ImageButton.propsTypes = {
  text: PropTypes.string,
  onPress: () => {},
  disabled: PropTypes.bool,
  textColor: PropTypes.any,
  fontSize: PropTypes.number,
  imgHeight: PropTypes.number,
  imgWidth: PropTypes.number,
};
const styles = StyleSheet.create({
  container: {
    alignItems: "center",
  },
  image: {},
  text: {
    backgroundColor: Color.transparent,
  },
});
export default ImageButton;
